<template>
  <div class="content_box">
    <FullCalendar v-model:options="calendarOptions" />
  </div>
</template>

<script lang="ts" setup>
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import FullCalendar from "@fullcalendar/vue3";
import { onMounted, reactive } from "vue";

let showFinish = true;
let showNoTime = true;
const props = defineProps(["events", "finishEvents", "noTimeEvents"]);
const calendarOptions = reactive({
  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
  height: 550,
  initialView: "dayGridMonth",
  eventTextColor: "white",
  customButtons: {
    showFinishTask: {
      text: "展示已结束",
      click: function () {
        if (showFinish) {
          showFinish = false;
          calendarOptions.events = [...props.events, ...props.finishEvents];
        } else {
          showFinish = true;
          calendarOptions.events = [...props.events];
        }
      },
    },
    showNoTimeTask: {
      text: "展示未指定日期",
      click: function () {
        if (showNoTime) {
          showNoTime = false;
          calendarOptions.events = [...props.events, ...props.noTimeEvents];
        } else {
          showNoTime = true;
          calendarOptions.events = [...props.events];
        }
      },
    },
  },
  headerToolbar: {
    left: "dayGridMonth,timeGridWeek,timeGridDay,showFinishTask,showNoTimeTask",
    center: "title",
    right: "prevYear,prev,next,nextYear today",
  },
  eventOrderStrict: true,
  eventColor: "green",
  // 设置日程
  events: [
    { title: "event 1", start: "2023-08-25 14:22:00", color: "red", description: "description for Long Event" },
    { title: "event 1", date: "2023-08-25 14:00:00" },
    { title: "event 1", date: "2023-08-25 14:00:00" },
    { title: "event 1", date: "2023-08-25 14:00:00" },
    { title: "event 2", date: "2023-08-24 14:00:00" },
  ],
  editable: false,
  dayMaxEventRows: 2,
  locale: "zh", // 设置语言
});
onMounted(() => {
  calendarOptions.events = props.events;
});
</script>

<style lang="scss" scoped></style>
